<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style class="vjs-styles-defaults">
			.video-js {
				width: 300px;
				height: 150px;
			}

			.vjs-fluid {
				padding-top: 56.25%
			}
			.position-relative{
			    position: relative;
				float: left;
				margin-left: 10px;
				margin-bottom: 20px;
			    height:220px;   //可自定义
			}
			.objectfit-scale{
				height: 100%;
				width: auto;
				margin-bottom: 10px;
				border-bottom: 10px;
				position: relative;
				object-fit: scale-down;
			}
			
		</style>
		<title>AI云相册</title>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
		<meta name="keywords" content="智能分类">
		
		<link rel="icon" href="img/coffee.ico">
		<script src="https://nd-static.bdstatic.com/photo-static/yike-web/css/hm.js"></script>
		
		<script src="https://nd-static.bdstatic.com/photo-static/yike-web/css/badjs-sdk-min-1.3.0.js" crossorigin="anonymous"></script>
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-0894528f.befe9ca9.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-0c346ca1.8e9bec44.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-24bc48a4.fe5b6283.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-2f837a90.e92fa509.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-300b956a.8d3f6e6d.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-356e0218.7eb30b2a.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-455f554e.2685d826.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-48e72c43.773da97b.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-49d566c8.2e6c444c.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-4a4c767f.2c093530.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-52251d9c.124e48f2.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-52d2ea19.10f5125a.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-735a8a23.ca063252.css" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-0894528f.d605bd5e.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-0c346ca1.8c95f387.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-24bc48a4.e886e66c.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-2f837a90.d8d29151.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-300b956a.b3af2ffc.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-356e0218.80561775.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-455f554e.b25e8ecb.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-48e72c43.1eb5bdec.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-49d566c8.0b9b09e0.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-4a4c767f.b64e4712.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-52251d9c.f8b33bd9.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-52d2ea19.50487a5c.js" rel="prefetch">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/js/chunk-735a8a23.59b95600.js" rel="prefetch">
		<link href="css/modifyed.css" rel="preload" as="style">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-vendors.52d5e634.css" rel="preload" as="style">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/index.7a0a82de.css" rel="preload" as="style">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-common.11948a3b.js" rel="preload" as="script" crossorigin="anonymous">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-vendors.60e602b1.js" rel="preload" as="script" crossorigin="anonymous">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/index.1299146f.js" rel="preload" as="script" crossorigin="anonymous">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-vendors.52d5e634.css" rel="stylesheet">
		<link href="css/modifyed.css" rel="stylesheet">
		<link href="https://nd-static.bdstatic.com/photo-static/yike-web/css/index.7a0a82de.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-300b956a.8d3f6e6d.css">
		<script charset="utf-8" src="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-300b956a.b3af2ffc.js"></script>
		<link rel="stylesheet" type="text/css" href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-2f837a90.e92fa509.css">
		<script charset="utf-8" src="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-2f837a90.d8d29151.js"></script>
		<link rel="stylesheet" type="text/css" href="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-52d2ea19.10f5125a.css">
		<script charset="utf-8" src="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-52d2ea19.50487a5c.js"></script>
	</head>
	<body>
		<div data-v-d832c25e="" data-v-3ebeadaf="" class="yk-container">
			<!-- 头部导航显示 -->
			<div data-v-3c3a3146="" data-v-d832c25e="" class="yk-header-container">
				<div data-v-3c3a3146="" class="yk-header">
					<div data-v-3c3a3146="" class="yk-header__left" width="50px" height="50px">
						<img data-v-3c3a3146="" src="img/coffee.png" alt="logo" width="50">
						<p style="font-size: 30;font-weight: 800;">咖啡相册</p>
						
					</div>
					<!-- 右侧导航 -->
					<div data-v-3c3a3146="" class="yk-header__right">
						<!-- 上传按钮 -->
						<div data-v-3c3a3146="" class="yk-header__upload">
							<div data-v-0e8fef68="" data-v-3c3a3146="" class="yike-upload-container">
								<div data-v-076d3929="" data-v-0e8fef68="" class="yk-uploader">
									<span data-v-783afc77="" data-v-076d3929="" height="114">
										<div data-v-076d3929="" data-v-783afc77="" class="yk-popover__reference" aria-describedby="yk-popover-2155"
										 tabindex="0">
											<div data-v-3c3a3146="" data-v-783afc77="" class="yk-header__upload--btn">
												<i data-v-3c3a3146="" data-v-783afc77="" class="yk-icons yk-icon-plus"></i>
												<span data-v-3c3a3146="" data-v-783afc77="">上传</span>
											</div>
										</div>
									</span>
								</div>
								<!---->
							</div>
						</div>
						<!-- 个人信息 -->

						<div data-v-3c3a3146="" class="yk-header__info">
							<div data-v-3c3a3146="" class="yk-header__dropdown">
								<img data-v-3c3a3146="" src="img/head.jpg" alt="头像" class="avatar" style="">
								<span data-v-783afc77="" data-v-3c3a3146="">
									<div data-v-783afc77="" role="tooltip" id="yk-popover-1433" aria-hidden="true" class="yk-popover yk-popper popper"
									 tabindex="0" style="width: 300px; display: none;">
										<!---->
										<div data-v-3c3a3146="" class="yk-header__popup">
											<div data-v-3c3a3146="" class="yk-header__popup--top">
												<div data-v-3c3a3146="" class="username">
													CoffeeChicken
												</div>
											</div>

										</div>

									</div>
									<div data-v-3c3a3146="" data-v-783afc77="" class="yk-header__user yk-popover__reference" aria-describedby="yk-popover-1433"
									 tabindex="0">
										<div data-v-3c3a3146="" data-v-783afc77="" class="username">CoffeeChicken</div>
									</div>
								</span>
							</div>
						</div>
						<!---->
						<div data-v-3c3a3146="" class="help">
							<p data-v-3c3a3146="" class="text">退出账号</p>
						</div>
					</div>
				</div>
				
			</div>

			<!-- 侧边显示栏 -->
			<div data-v-610a4de6="" data-v-d832c25e="" class="yk-side">
				<div data-v-610a4de6="" class="yk-side__menu">
					<ul data-v-610a4de6="" role="menubar" class="el-menu" style="background-color: rgb(255, 255, 255);">
						<li data-v-610a4de6="" role="menuitem" aria-haspopup="true" aria-expanded="true" class="el-submenu is-active is-opened">
							<div class="el-submenu__title" style="padding-left: 20px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
								<div data-v-610a4de6="" class="yk-side__title">
									<!----><span data-v-610a4de6="">照片</span><img data-v-610a4de6="" src=""
									 class="arrow"></div><i class="el-submenu__icon-arrow el-icon-arrow-down"></i>
							</div>
							<ul role="menu" class="el-menu el-menu--inline" style="background-color: rgb(255, 255, 255); height: 90px; overflow: visible; transition: all 0.4s ease 0s;">
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="router-link-exact-active router-link-active"
										 aria-current="page">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item is-active" style="padding-left: 40px; color: rgb(59, 117, 255); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-picture"></i><span data-v-610a4de6="" class="text">全部照片</span></li>
										</a></ul>
								</li>
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 40px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-recent"></i>
												<div data-v-610a4de6="" class="u-tooltip">
													<div class="u-tooltip-rel"><span data-v-610a4de6="" class="text">最近上传</span></div>
													<!-- <div class="u-tooltip-popper u-tooltip-dark" style="display: none; position: absolute; will-change: top, left; top: 65px; left: 133px;"
													 x-placement="right">
														<div class="u-tooltip-content">
															<div class="u-tooltip-arrow"></div>
															<div class="u-tooltip-inner">
			
																查看七日内备份的照片</div>
														</div>
													</div> -->
												</div>
											</li>
										</a></ul>
								</li>
							</ul>
						</li>
						<li data-v-610a4de6="" role="menuitem" aria-haspopup="true" aria-expanded="true" class="el-submenu is-opened">
							<div class="el-submenu__title" style="padding-left: 20px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">
								<div data-v-610a4de6="" class="yk-side__title">
									<span data-v-610a4de6="">相册</span>
									
								</div>
							</div>
							<ul role="menu" class="el-menu el-menu--inline" style="background-color: rgb(255, 255, 255); height: 180px; overflow: visible; transition: all 0.4s ease 0s;">
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 40px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-album"></i><span data-v-610a4de6="" class="text">相册</span></li>
										</a></ul>
								</li>
								<!---->
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 40px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-person"></i><span data-v-610a4de6="" class="text">人物</span></li>
										</a></ul>
								</li>
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 40px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-animal"></i><span data-v-610a4de6="" class="text">动物</span></li>
										</a></ul>
								</li>
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 40px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-construction"></i><span data-v-610a4de6="" class="text">建筑</span></li>
										</a></ul>
								</li>
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 40px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-food"></i><span data-v-610a4de6="" class="text">食物</span></li>
										</a></ul>
								</li>
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 40px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-location"></i><span data-v-610a4de6="" class="text">地点</span></li>
										</a></ul>
								</li>
								<li data-v-610a4de6="" class="el-menu-item-group">
									<div class="el-menu-item-group__title" style="padding-left: 40px;"></div>
									<ul><a data-v-610a4de6="" href="#" class="">
											<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 40px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
												 data-v-610a4de6="" class="yk-icons yk-icon-thing"></i><span data-v-610a4de6="" class="text">事物</span></li>
										</a></ul>
								</li>
								
								<div data-v-610a4de6="" class="split-line"></div>
								<a data-v-610a4de6="" href="#" class="">
									<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 20px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
										 data-v-610a4de6="" class="yk-icons yk-icon-trash"></i><span data-v-610a4de6="" class="text">回收站</span></li>
								</a>
								
							</ul>
						</li>
						<!-- <div data-v-610a4de6="">
							<div data-v-610a4de6="" class="split-line"></div>
							<a data-v-610a4de6="" href="https://photo.baidu.com/photo/web/trash" class="">
								<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 20px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
									 data-v-610a4de6="" class="yk-icons yk-icon-trash"></i><span data-v-610a4de6="" class="text">回收站</span></li>
							</a>
						</div> -->
						
						<!-- <div data-v-610a4de6="">
							<a data-v-610a4de6="" href="https://photo.baidu.com/photo/web/import" class="">
								<li data-v-610a4de6="" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 20px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);"><i
									 data-v-610a4de6="" class="yk-icons yk-icon-pan-logo"></i>
									<div data-v-610a4de6="" class="tool-tip-import-user u-tooltip">
										
										<div class="u-tooltip-popper u-tooltip-dark" style="display: none; position: absolute; will-change: top, left; top: 446px; left: 133px;"
										 x-placement="right">
											<div class="u-tooltip-content">
												<div class="u-tooltip-arrow"></div>
												<div class="u-tooltip-inner">
			
													一键导入网盘照片</div>
											</div>
										</div>
									</div>
								</li>
							</a>
						</div> -->
					
					
					</ul>
				</div>
				<div data-v-610a4de6="" class="yk-side__footer-backup">
			
				</div>
			</div>
			
			
		
			<div data-v-d832c25e="" class="yk-container__main">
				<div data-v-1efac834="" data-v-d832c25e="" class="basic-container">
					<div data-v-1968714a="" data-v-3ebeadaf="" class="yk-index yk-index-container">
						<!-- 主框架下的头部信息, 主要用来点击视频和照片 -->
						<div data-v-1968714a="" class="list-wrap global-top">
							<div data-v-1968714a="" class="type-list">
								<div data-v-1968714a="" class="check" style="transform: translateX(0px);"></div>
								<div data-v-1968714a="" class="type checkItem">
									全部
								</div>
								<div data-v-1968714a="" class="type">
									视频
								</div>
							</div>
							
						</div>
						<br>
						<br>
						
						
						<!-- 测试图片的响应式显示 -->
						<!-- 显示就那么个陈坤 -->
						<div class="position-relative" href="#">
						  <img class="objectfit-scale" src="img/andre-benz-pibsjChY-jk.jpg" alt="" >
						  <img class="objectfit-scale" src="img/andre-benz-pibsjChY-jk.jpg" alt="" >
						  <img class="objectfit-scale" src="img/p6.jpg" alt="" >
						  <img class="objectfit-scale" src="img/andre-benz-pibsjChY-jk.jpg" alt=""  >
						  <img class="objectfit-scale" src="img/avenger1.jpg" alt=""  >
						  <img class="objectfit-scale" src="img/andre-benz-pibsjChY-jk.jpg" alt=""  >
						  <img class="objectfit-scale" src="img/avenger1.jpg" alt=""  >
						</div>
						
						<br>

					</div>
					<!-- 上传进度显示 -->
					
				
				</div>
			</div>
			
			
			
			
			
		</div>
		<script src="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-vendors.60e602b1.js" crossorigin="anonymous"></script>
		<script src="https://nd-static.bdstatic.com/photo-static/yike-web/css/chunk-common.11948a3b.js" crossorigin="anonymous"></script>
		<script src="https://nd-static.bdstatic.com/photo-static/yike-web/css/index.1299146f.js" crossorigin="anonymous"></script>
		<!-- <script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement('script');
				hm.src = 'https://hm.baidu.com/hm.js?829488e8924d8de8d4420f2bbed270ca';
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})()
		</script> -->
	</body>
</html>
